/** * 财务管理-财务统计 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">财务管理</el-breadcrumb-item>
      <el-breadcrumb-item>财务统计</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search" align="left">
      <el-form-item label="搜索:">
        <el-input size="small" v-model="formInline.code" placeholder="客商编码" class="searchInput"/>
        <el-input size="small" v-model="formInline.name" placeholder="客商名称" class="searchInput"/>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="getdata()">搜索</el-button>
        <el-button size="small" type="danger" @click="clearConditon()">重置</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row border  
    style="width: 100%" @sort-change="sortChange">
      <el-table-column align="center" prop="id" label="序号" width="50"/>
      <el-table-column align="center" prop="code" label="客户编码" width="100"/>
      <el-table-column align="center" prop="name" label="客户名称" width="180"/>
      <el-table-column align="center" prop="total_order" label="订单总数" width="110" sortable="custom"/>
      <el-table-column align="center" prop="undo_order" label="未完成订单" width="110" sortable="custom"/>
      <el-table-column align="center" prop="total_money" label="货款总额" width="110" sortable="custom"/>
      <el-table-column align="center" prop="unpaid_money" label="未支付货款" width="110" sortable="custom"/>
      <el-table-column align="center" label="操作" min-width="150">
        <template slot-scope="scope">
            <el-button size="mini" type="success" @click="showOrder(scope.row)">查看订单</el-button>
            <el-button size="mini" type="primary" @click="showInvoice(scope.row)">查看发票</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination :child-msg="pageparm" @callFather="callFather" align="center"/>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      // 搜索框数据
      formInline: {
        code:"",
        name: "",
      },
      // 表单数据
      listData: [], 
      // 初始化分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 5,
        total: 0,
      },
      // 排序字段
      orderSort:"",
      orderKey:"",
    };
  },
  // 注册组件
  components: {Pagination},

  //创建完毕
  created() {
    this.getdata();
  },

  // 定义方法
  methods: {
    // 清空搜索条件
    clearConditon(){
      this.formInline.name= "";
      this.formInline.code= "";
      this.getdata();
    },
    // 获取表单数据
    getdata() {
      let queryEntity={
        currentPage:this.pageparm.currentPage,
        pageSize:this.pageparm.pageSize,
        entity:this.formInline,
        orderSort:this.orderSort,
        orderKey:this.orderKey
      };
      this.$axios.post("/api/merchants/finance",queryEntity)
      .then((res) => {
          if (res.data.code == 200) {
              this.listData = res.data.data.list;
              //对总数量进行赋值
              this.pageparm.total = res.data.data.total;
          }else{
              this.$message({type: 'info',message: res.data.message})
          }
      })
      .catch(err => {
          this.$message.error('数据加载失败，请稍后再试！')
      })
    },
    // 分页插件事件
    callFather(parm) {
      this.pageparm.currentPage = parm.currentPage;
      this.pageparm.pageSize = parm.pageSize;
      this.getdata();
    },
    // 排序方法
    sortChange(column) {
        if (column.order == "ascending") {
          this.orderSort = 'asc'
        } else if (column.order == "descending") {
          this.orderSort = 'desc'
        } else {
          this.orderSort = ''
        }
        this.orderKey=column.prop;
        this.getdata();
      },
    // 查看订单
    showOrder(obj) {
      this.$router.push({path: '/productPlan/Order',query:{ merchants_name:obj.name}});
    },
    // 查看发票
    showInvoice(obj) {
      this.$router.push({path: '/finance/Invoice',query:{ merchants_name:obj.name}});
    }
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
.searchInput{
  width: 100px;
}
</style>
